    <%@ page contentType="text/html;charset=UTF-8" %>
    <%@ include file="/include.inc.jsp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
        <style>
            .file-uploads {
                overflow: hidden;
                position: relative;
                text-align: center;
                display: inline-block;
                background-color: #fbfdff;
                border: 1px dashed #c0ccda;
                border-radius: 6px;
                box-sizing: border-box;
                width: 100px;
                height: 100px;
                line-height: 100px;
            }

            .edit .el-form .el-form-item__content {
                max-width: 220px;
                position: relative;
            }

            .imgbox {
                display: inline-block;
                position: absolute;
                top: 0;
                margin-left: 160px;
                background-color: #fbfdff;
                border: 1px dashed #c0ccda;
                border-radius: 6px;
                box-sizing: border-box;
                width: 100px;
                height: 100px;
                line-height: 100px;
            }

            .imgbox:hover:after {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                content: attr(data-text);
                transition: all 1s ease;
                transform: translateY(0);
                color: #FFF;
            }

            .imgbox img {
                width: 100%;
                height: 100%;
            }

            .file-uploads:hover, .file-uploads:focus {
                border-color: #409EFF;
                color: #409EFF;
            }

            .item-action {
                position: absolute;
                z-index: 99;
                display: inline-block;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
            }

            .item-action i {
                display: none;

            }

            .imgbox:hover i {
                display: inline-block;
                color: #fff;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    <body>
    <div class="mainpage edit">
        <!--顶部菜单-->
        <div class="page-topmenu">
        <shiro:hasPermission name="newsInfo:edit">
            <div class="btn-panel">
                <el-button type="primary" size="small" icon="el-icon-check" @click="save">保存</el-button>
            </div>
        </shiro:hasPermission>    
            <div class="btn-panel">
                <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
            </div>
        </div>
        <!--编辑表单-->
        <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
                 :label-position="labelposition"
                 class="one-col" :validate-on-rule-change="false">
            <!--视业务进行更改-begin-->
            <input type="hidden" v-model="form.id"/>
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input type="textarea"
                          :rows="8"
                          v-model="form.content"
                          placeholder="内容"></el-input>
            </el-form-item>
            <el-form-item label="发布时间" prop="publishTime">
                <el-date-picker
                        v-model="form.publishTime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="发布时间"
                        default-time="00:00:00" style="width: 100%;"
                        :picker-options="start_Date"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="form.isDisplay">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="2">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="图片" prop="icon">
                <file-upload
                        ref="upload"
                        post-action="/uploadfile/upload"
                        :maximum="1"
                        extensions="gif,jpg,jpeg,png,webp"
                        accept="image/png,image/gif,image/jpeg,image/webp"
                        :multiple="true"
                        multiple
                        @input-file="inputFile"
                        @input-filter="inputFilter"
                        :thread="9"
                >
                    <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
                </file-upload>
                <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                <div class="imgbox" v-for="(item,index) in dialogImageUrl" :key="index.toString()"
                     :style="{marginLeft: (index+ 1)* 110 + 'px'}"
                >

                    <img width="100%" :src="item" alt="" mode="scaleToFill">
                    <span class="item-action">
                    <i class="el-icon-zoom-in" style="left: 16%;font-size: 28px" @click="handlePreview(index,item)"></i>
                    <i class="el-icon-delete" style="left: 60%;font-size: 28px" @click="handleRemove(index)"></i>
                </span>
                </div>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="imageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <!--视业务进行更改-end-->
        </el-form>
    </div>
    <script>
        //初始化数据，必须放置在列表页面封装部分前
        function initVueOption(obj) {
            //设置控制器
            obj.data.controller = "${ctx}/news/newsinfo";
            //设置表单数据
            obj.data.form = ${newsInfo};
            //设置校验规则，没有则删掉
            obj.data.rules = {
                title: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                publishTime: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ]
            }
            if(obj.data.form.isDisplay<=0){
                obj.data.form.isDisplay=1;
            }
            //限制时间=====================begin===============================
            obj.data.start_Date={
                disabledDate:function(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                }
            }
            //限制时间=====================end=================================


            //上传图片=====================begin===============================
            obj.data.dialogVisible = false;
            obj.data.dialogImageUrl = [];
            obj.data.imageUrl = '';
            //图片回显
            if (obj.data.form.imgSrc != null) {
                // var image = {name: "1", url: obj.data.form.image}
                obj.data.dialogImageUrl=obj.data.form.imgSrc;
            }
            //删除图片
            obj.methods.handleRemove = function (i) {
                // Page.form.image = "";
                // console.log(i)
                obj.data.dialogImageUrl.splice(i, 1)
            }
            //显示（放大）
            obj.methods.handlePreview = function (i, file) {
                obj.data.imageUrl = file;
                obj.data.dialogVisible = true;
            }

            obj.methods.inputFile = function (newFile, oldFile) {
                // 自动上传
                if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                    if (!this.$refs.upload.active) {
                        this.$refs.upload.active = true
                    }
                }
                //上传成功
                if (newFile && oldFile && !newFile.active && oldFile.active) {

                    var userAgent = navigator.userAgent;
                    var resData = null;
                    if (userAgent.indexOf("MSIE 9.0") > -1) { //判断是否是ie 9浏览器
                        resData = newFile.response
                    } else {
                        resData = JSON.parse(newFile.response);
                    }
                    if (resData.state == 1) {
                        obj.data.dialogImageUrl.push(resData.data);
                        obj.data.form.imgSrc = obj.data.dialogImageUrl;
                        if (obj.data.dialogImageUrl.length > 8) {
                            this.$refs.upload.active = false;
                            obj.data.dialogImageUrl = obj.data.dialogImageUrl.slice(0, 1);
                            this.$message.error('只能上传1张!');
                        }
                    }
                }
            },
                //上传之前
                obj.methods.inputFilter = function (newFile, oldFile, prevent) {
                    if (newFile && !oldFile) {
                        // 过滤不是图片后缀的文件
                        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
                            this.$message.error('只能上传jpg/png文件，且不超过500kb,请重新上传');
                            return prevent()
                        }
                    }
                }
            //上传图片=====================end=================================
        }
    </script>
    <!--编辑页面封装部分-->
    <%@include file="/WEB-INF/views/layout/miiteen/page.edit.ref.jsp" %>
    </body>
    </html>